<template>
    <ele-modal width="680px" :visible="visible" :append-to-body="true" :close-on-click-modal="true"
        custom-class="ele-dialog-form" :title="isUpdate?'修改代理':'添加代理'" @update:visible="updateVisible">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row :gutter="15">
                <el-col :md="24" :sm="24" :xs="24" v-if="isUpdate">
                    <el-form-item label="用户ID:" prop="userId">
                      {{form.userId}}
                    </el-form-item>
                </el-col>
                <!-- <el-col :md="24" :sm="24" :xs="24">
                    <el-form-item label="上级代理:" prop="onActing">
                        <el-input clearable v-model="form.onActing" placeholder="请输入上级代理" />
                    </el-form-item>
                </el-col> -->
                <el-col :md="24" :sm="24" :xs="24">
                    <el-form-item label="状态:" prop="status">
                        <el-switch v-model="form.status" active-color="#13ce66"
                        inactive-color="#cccccc"  />
                    </el-form-item>
                </el-col>
                <el-col :md="24" :sm="24" :xs="24">
                    <el-form-item label="代理级别:" prop="actingNum">
                        <el-select clearable class="ele-block" v-model="form.actingNum" placeholder="请选择代理级别"  style="width: 100%;">
                            <el-option label="无代理" :value="0" />
                            <el-option label="一级代理" :value="1" />
                            <el-option label="二级代理" :value="2" />
                            <el-option label="总代理" :value="3" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template v-slot:footer>
            <el-button @click="updateVisible(false)">取消</el-button>
            <el-button type="primary" :loading="loading" @click="save">
                保存
            </el-button>
        </template>
    </ele-modal>
</template>

<script>
import { addActing, updateActing } from "@/api/actingList";

export default {
    props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object
    },
    data() {
        const defaultForm = {
            _id: null,
            onActing: "",
            userId: "",
            actingNum: null,
            status:1
        };
        return {
            defaultForm,
            form: { ...defaultForm },
            // 表单验证规则
            rules: {
                onActing: [
                    {
                        required: true,
                        message: '请输入上级代理',
                        trigger: 'blur'
                    }
                ],
                actingNum: [
                    {
                        required: true,
                        message: '请选择代理',
                        trigger: 'blur'
                    }
                ],
            },
            // 提交状态
            loading: false,
            // 是否是修改
            isUpdate: false
        };
    },
    watch: {
        visible(visible) {
            if (visible) {
                if (this.data) {
                    // console.log(1111111111,this.data);
                    this.data.status = this.data.status ? true : false;
                    this.$util.assignObject(this.form, { ...this.data });
                    this.isUpdate = true;
                } else {
                    this.isUpdate = false;
                }
            } else {
                this.$refs.form.clearValidate();
                this.form = { ...this.defaultForm };
            }
        }
    },
    methods: {
        /* 保存编辑 */
        save() {
            this.$refs.form.validate((valid) => {
                if (!valid) {
                    return false;
                }
                this.loading = true;
                const data = {
                    ...this.form
                };
                data.status = data.status ? 1 : 0;
                const saveOrUpdate = this.isUpdate ? updateActing : addActing;
                saveOrUpdate(data)
                    .then((res) => {
                        console.log('结果', res);
                        this.loading = false;
                        this.$message.success('保存成功');
                        this.updateVisible(false);
                        this.$emit('done');
                    })
                    .catch((msg) => {
                        this.loading = false;
                        this.$message.error(msg);
                    });
            });
        },

        /* 更新visible */
        updateVisible(value) {
            this.$emit('update:visible', value);
        }
    }
};
</script>

<style lang="scss" scoped></style>